<template>
  <Form ref="form" :model="form" :rules="formRules" class="form">
    <Row class="form-row" :gutter="16">
      <Col :lg="6" :md="12" :sm="24">
      <FormItem label="仓库名" prop="name">
        <Input
          v-model="form.name"
          placeholder="请输入仓库名称"
        />
      </FormItem>
      </Col>
      <Col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
      <FormItem
        prop="url"
        label="仓库域名">
        <Input
          v-model="form.url"
          placeholder="请输入"
        >
        <span slot="prepend">http://</span>
        <span slot="append">.com</span>
        </Input>
      </FormItem>
      </Col>
      <Col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
      <FormItem
        prop="owner"
        label="仓库管理员">
        <Select v-model="form.owner" placeholder="请选择管理员">
          <Option value="王同学">王同学</Option>
          <Option value="李同学">李同学</Option>
          <Option value="黄同学">黄同学</Option>
        </Select>
      </FormItem>
      </Col>
    </Row>
    <Row class="form-row" :gutter="16">
      <Col :lg="6" :md="12" :sm="24">
      <FormItem
        prop="approver"
        label="审批人">
        <Select v-model="form.approver" placeholder="请选择审批员">
          <Option value="王晓丽">王晓丽</Option>
          <Option value="李军">李军</Option>
        </Select>
      </FormItem>
      </Col>
      <Col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
      <FormItem
        prop="type"
        label="仓库类型">
        <Select
          v-model="form.type"
          placeholder="请选择仓库类型"
        >
          <Option value="公开">公开</Option>
          <Option value="私密">私密</Option>
        </Select>
      </FormItem>
      </Col>
    </Row>
    <FormItem v-if="showSubmit">
      <Button type="primary" @click="handleSubmit('form')">Submit</Button>
    </FormItem>
  </Form>
</template>

<script>
export default {
  name: 'RepositoryForm',
  props: {
    showSubmit: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      form: {
        name: '',
        url: '',
        owner: '',
        approver: '',
        type: ''
      },
      formRules: {}
    }
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('Success!')
        } else {
          this.$Message.error('Fail!')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
